<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-input
                            placeholder="请输入学校名称"
                            v-model="searchInfo.accountName"
                            clearable
                            size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" size="small"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 10px;" border>
            <el-table-column prop="username" label="学校名称" align="center">
            </el-table-column>
            <el-table-column prop="education" label="管理机构" align="center"
                             v-if="searchInfo.currentRoleId===1||searchInfo.currentRoleId===2">
            </el-table-column>
            <el-table-column prop="areaName" label="地区名称" align="center">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="300px">
                <template slot-scope="scope">
                    <el-button
                            @click="viewSchool(scope.row)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"

                    >查看
                    </el-button
                    >
                    <el-button
                            @click="openClassDetail(scope.row)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                    >开课情况
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :style="{ float: 'right', padding: '20px' }"
                :total="totalCount"
                @current-change="handlepageChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <!--审批失败弹出框-->
        <el-dialog title="学校信息" :visible.sync="dialogFormVisible" class="dialogs">
            <el-form
                    :model="form"
                    :inline="true"
                    label-width="100px"
            >
                <el-divider content-position="left">基本信息</el-divider>
                <el-form-item label="学校名称" prop="username"><span>{{form.username}}</span></el-form-item>
                <el-form-item label="性别" prop="sex">
                    <span> {{form.sex==1?'男':'女'}}</span>
                </el-form-item>
                <el-divider content-position="left">联系信息</el-divider>
                <el-form-item label="区域" prop="areaId">
                    {{form.areaName}}
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <span>{{form.address}}</span>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <span>{{form.mobile}}</span>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--开课情况弹框内容-->
        <el-dialog
                :before-close="closeClassDialog"
                title="报名情况"
                :visible.sync="classDialogVisible"
                class="registrationDialogs"
        >
            <el-table :data="classTableData" style="width: 100%;margin-bottom: 10px;" border>
                <el-table-column prop="className" label="班级名称" align="center">
                </el-table-column>
                <el-table-column prop="courseName" label="课程" align="center">
                </el-table-column>
                <el-table-column prop="courseTime" label="上课时间" align="center">
                </el-table-column>
                <el-table-column prop="classRoomName" label="教室" align="center">
                </el-table-column>
                <el-table-column prop="signUpNumber" label="已报名人数" align="center">
                </el-table-column>
                <el-table-column label="人数范围" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.stuNoMin}}~{{scope.row.stuNoMax}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="classState" label="班级状态" align="center">
                    <template slot-scope="scope">
                        <span>{{filterStatus(scope.row.classState)}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="classCurrPage"
                    :page-size="classPageSize"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :total="classTotalCount"
                    @current-change="classHandlepageChange"
                    @size-change="classHandleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
        </el-dialog>
    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
    import {mapGetters} from "vuex";
    import {schoolList, userDetail} from "@/api/account";
    import {gradeList} from "@/api/grade";
    import infoList from "@/components/mixins/infoList";

    export default {
        name: "school",
        mixins: [infoList],
        data() {
            return {
                dialogFormVisible: false,
                classDialogVisible: false,
                classCurrPage: 1,
                classTotalCount: 0,
                classPageSize: 10,
                classTableData: [],
                options: [],
                listApi: schoolList,
                searchInfo: {accountName: '', roleId: 4, currentRoleId: 0, currentAreaId: 0},
                btns: [],
                form: {},
                schoolId: 0
            };
        },
        computed: {
            ...mapGetters("user", ["userInfo", "token"]),
        },
        methods: {
            filterStatus(val) {
                switch (val) {
                    case 0:
                        return '待报名';
                    case 1:
                        return '报名中';
                    case 2:
                        return '已开班';
                    case 3:
                        return '已取消';
                    case 4:
                        return '已完成';
                    case 5:
                        return '延期';
                    default:
                        break;
                }
            },
            classHandleSizeChange(val) {
                this.classPageSize = val
                this.getTableData()
            },
            classHandlepageChange(val) {
                this.classCurrPage = val
                this.getTableData()
            },
            closeClassDialog() {
                this.classDialogVisible = false;
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            async viewSchool(row) {
                const res = await userDetail(row.userId,1)
                this.form = res.data
                this.dialogFormVisible = true;
            },
            openClassDetail(val) {
                console.log(val)
                this.schoolId = val.userId;
                this.getclassTableData();
                this.classDialogVisible = true;
            },
            async getclassTableData(currPage = this.classCurrPage, pageSize = this.classPageSize) {
                const classTable = await gradeList({
                    "currPage": currPage,
                    "pageSize": pageSize,
                    "createId": this.schoolId
                })
                this.classTableData = classTable.data.data
                this.classTotalCount = classTable.data.totalCount
                this.classCurrPage = classTable.data.currPage
                this.classPageSize = classTable.data.pageSize
                this.$forceUpdate()

            },
            closeDialog() {
                this.dialogFormVisible = false;
            },
        },
        async created() {
            this.searchInfo.currentRoleId = this.userInfo.roleId;
            this.searchInfo.currentAreaId = this.userInfo.areaId;
            this.getTableData();
        },
    };
</script>
<style scoped lang="scss">
    .info {
        color: #409EFF;
    }

    .warning {
        color: #E6A23C;
    }

    .success {
        color: #67c23a;
    }

    .danger {
        color: #f56c6c;
    }

    .green {
        color: #67c23a;
    }

    .red {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {

        ::v-deep .el-dialog{
            width: 30%;
        }
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        /*::v-deep .el-input__inner {*/
        /*    width: 225px;*/
        /*}*/

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        ::v-deep .el-form .el-form-item {
            width: 49%;
            margin: 0;
        }

        ::v-deep .el-form .pics {
            width: 100%;
            margin-bottom: 22px;
        }

        ::v-deep .el-form .el-divider .el-divider__text {
            font-weight: bold;
            color: #409EFF;
        }

        ::v-deep .el-form .el-form-item .el-form-item__content {
            width: calc(100% - 112px)
        }

        ::v-deep .el-form .el-form-item .el-form-item__content .el-textarea__inner {
            width: 100%;
        }
    }

    .warning {
        color: #dc143c;
    }

    @import '../../style/punch-treeselect.css';
</style>
